<template>
	<div class="zs-card-sm zs-space-bottom zs-layout-flex-row zs-layout-justify-between">
		<div>
			<el-select v-model="searchObj.projectCode" filterable class="zs-select-md zs-space-right-sm" placeholder="项目名称" @change="changeProject">
				<el-option v-for="item in projectList" :key="item.projectCode" :label="item.projectName" :value="item.projectCode" />
			</el-select>
			<el-select v-model="searchObj.brandName" filterable clearable class="zs-select-md zs-space-right-sm" placeholder="品牌" multiple collapse-tags collapse-tags-tooltip remote remote-show-suffix :remote-method="searchbrandList" @change="search" @focus="brandList.length == 0 ? getBrandList() : ''">
				<el-option v-for="(item, index) in brandList" :key="index" :label="item.brandName" :value="item.brandName" />
			</el-select>
			<el-select v-model="searchObj.sourceType" class="zs-select-md zs-space-right-sm" placeholder="欠款口径" @change="search">
				<el-option v-for="item in arrearsTypeDropdownRespList" :key="item.code" :label="item.name" :value="item.code" />
			</el-select>
			<el-popover popper-class="zs-popper" placement="bottom-end" trigger="click">
				<template #reference>
					<el-button class="zs-btn-square-solid" :class="{ 'zs-btn-square-solid-active': searchObj.chargetypeIdList.length > 0 || searchObj.bizmode.length > 0 || searchObj.islitigation || searchObj.isrelationcustomer || searchObj.issinglerow || searchObj.isOverMargin || searchObj.contractsCode || searchObj.contractsStatusList.length > 0 }">
						<el-icon>
							<MoreFilled />
						</el-icon>
					</el-button>
				</template>
				<template #default>
					<div>
						<el-cascader class="zs-select-md zs-space-right-sm zs-space-bottom-sm" v-model="searchObj.chargetypeIdList" :options="chargetypeList" placeholder="费项科目" @change="changeCharge" :props="cascaderProps" collapse-tags collapse-tags-tooltip clearable filterable :teleported="false" />
						<el-select v-model="searchObj.bizmode" multiple collapse-tags collapse-tags-tooltip clearable filterable class="zs-select-md zs-space-right-sm zs-space-bottom-sm" placeholder="资产类型" :teleported="false" @change="search">
							<el-option v-for="(item, index) in bizTypeList" :key="index" :label="item.bizmode" :value="item.bizmode" />
						</el-select>
						<el-select v-model="searchObj.islitigation" clearable filterable class="zs-select-md zs-space-right-sm zs-space-bottom-sm" placeholder="是否诉讼" :teleported="false" @change="search">
							<el-option label="非诉讼" :value="0" />
							<el-option label="诉讼" :value="1" />
						</el-select>
						<el-select v-model="searchObj.isrelationcustomer" clearable filterable class="zs-select-md zs-space-right-sm zs-space-bottom-sm" placeholder="是否关联方" :teleported="false" @change="search">
							<el-option label="非关联方" :value="0" />
							<el-option label="关联方" :value="1" />
						</el-select>
						<el-select v-model="searchObj.issinglerow" clearable filterable class="zs-select-md zs-space-right-sm zs-space-bottom-sm" placeholder="是否单列" :teleported="false" @change="search">
							<el-option label="非单列" :value="0" />
							<el-option label="单列" :value="1" />
						</el-select>
						<el-select v-model="searchObj.isOverMargin" clearable filterable class="zs-select-md zs-space-right-sm zs-space-bottom-sm" placeholder="是否超保证金" :teleported="false" @change="search">
							<el-option v-for="(item, index) in isNoOptionList" :key="index" :label="item.isrelationcustomer" :value="item.isrelationcustomer" />
						</el-select>
						<el-select v-model="searchObj.contractsCode" clearable filterable class="zs-select-md zs-space-right-sm zs-space-bottom-sm" placeholder="合同编号" @change="search" remote remote-show-suffix :remote-method="searchContractsCodeList" @focus="contractsCodeList.length == 0 ? getContractCodeList() : ''" :teleported="false">
							<el-option v-for="(item, index) in contractsCodeList" :key="index" :label="item.contractCode" :value="item.contractCode" />
						</el-select>
						<el-select v-model="searchObj.contractsStatusList" clearable filterable class="zs-select-md zs-space-right-sm zs-space-bottom-sm" placeholder="合同状态" multiple collapse-tags collapse-tags-tooltip :teleported="false" @change="search">
							<el-option v-for="item in contractsStatusList" :key="item.contractsStatus" :label="item.contractsStatus" :value="item.contractsStatus" />
						</el-select>
					</div>
				</template>
			</el-popover>
			<el-button class="zs-btn-plain" @click="search"> 查询 </el-button>
		</div>
		<div>
			<el-button :class="{ 'zs-btn-plain': curTab != 1, 'zs-btn-primary': curTab == 1 }" @click="changeTab(1)">租费欠款</el-button>
			<el-button :class="{ 'zs-btn-plain': curTab != 2, 'zs-btn-primary': curTab == 2 }" @click="changeTab(2)">保证金欠款</el-button>
			<el-button :class="{ 'zs-btn-plain': curTab != 0, 'zs-btn-primary': curTab == 0 }" @click="changeTab(0)">全部欠款</el-button>
			<el-button class="zs-btn-plain" @click="handleDownload">
				<el-icon class="el-icon--left"> <Upload /> </el-icon>导出
			</el-button>
		</div>
	</div>
</template>

<script setup>
	import { useRoute } from 'vue-router';
	import { getDropDownListApi } from '@/api/SpecialReport/receivable';
	import { ref } from 'vue';
	import { downloadNewFile } from '@/utils/publicUtils';
	import detailApi from '@/api/Manage/Business/detailPages';
	const route = useRoute().query;
	let dataType = ref(1); // 1代表收付 0代表权责, 现在的需求是只查收付
	let curTab = ref(1); // 右上角类型切换
	let projectList = ref([]);
	let brandList = ref([]); // 品牌列表
	let contractsCodeList = ref([]); // 合同编号列表
	let cascaderProps = { multiple: true, label: 'feeItemName', value: 'feeItemId', children: 'feeItemNewestRespList', emitPath: true };
	let isNoOptionList = ref([]);
	let bizTypeList = ref([]);
	const arrearsTypeDropdownRespList = ref([
		{ code: 0, name: '账单口径' },
		{ code: 1, name: '权责口径' },
		{ code: 2, name: '考核口径' },
	]);

	const searchObj = ref({
		projectCode: route.projectCode,
		brandName: [],
		contractsCode: '',
		chargetypeParentIdList: [],
		chargetypeIdList: [],
		contractsStatusList: [],
		islitigation: '',
		isrelationcustomer: '',
		issinglerow: '',
		isOverMargin: '',
		bizmode: [],
		sourceType: 2,
		type: dataType.value,
		businessType: route.source == 'debt' ? 0 : 1, // 0:欠款追缴 1:欠款统计表(商业事业部专用)
		startDate: route.startDate || '',
		enDate: route.endDate || '',
	});

	const emit = defineEmits(['onSearch']);

	// 查询项目下拉选
	const getPorjectList = () => {
		detailApi.queryProjectApi({ type: dataType.value }).then(res => {
			if (res.data.code == 200) {
				projectList.value = res.data.data;
			}
		});
	};

	const changeProject = () => {
		searchObj.value.brandName = '';
		searchObj.value.contractsCode = '';
		searchObj.value.chargetypeParentIdList = [];
		searchObj.value.chargetypeIdList = [];
		getChargeList();
		getBrandList();
		getBizModeList();
		getContractCodeList();
	};

	// 查询品牌下拉选
	const getBrandList = brandName => {
		detailApi.queryBrandApi({ projectCode: searchObj.value.projectCode, brandName, type: dataType.value }).then(res => {
			if (res.data.code == 200) {
				brandList.value = res.data.data;
			}
		});
	};
	const searchbrandList = query => {
		query.length > 0 ? getBrandList(query) : '';
	};

	// 资产类型下拉选
	const getBizModeList = customerName => {
		detailApi.queryBizModeApi({ projectCode: searchObj.value.projectCode, customerName, type: dataType.value }).then(res => {
			if (res.data.code == 200) {
				bizTypeList.value = res.data.data;
			}
		});
	};

	// 合同编号下拉选
	const getContractCodeList = contractCode => {
		detailApi.queryContractApi({ projectCode: searchObj.value.projectCode, contractCode, type: dataType.value }).then(res => {
			if (res.data.code != 200) return;
			contractsCodeList.value = res.data.data || [];
		});
	};

	const searchContractsCodeList = query => {
		console.log(query);
		query.length > 0 ? getContractCodeList(query) : '';
	};

	//合同状态
	const contractsStatusList = ref([]);
	const getDropDownList = async () => {
		let res = await getDropDownListApi();
		if (res.data.code != 200) return;
		contractsStatusList.value = res.data.data.contractsStatusDropdownList || []; //合同状态
	};

	// 三合一下拉选（费项科目、是否诉讼、是否关联方）
	const getMergeList = async () => {
		let res = await detailApi.queryAllApi({ type: dataType.value });
		if (res.data.code != 200) return;
		isNoOptionList.value = res.data.data.arrearsIsrelationcustomerDTOList || [];
	};

	//费项
	let chargetypeList = ref([]);
	const getChargeList = async () => {
		let res = await detailApi.getChargeListApi(searchObj.value.projectCode);
		chargetypeList.value = res.data.data || [];
		initChargeTypeCode();
	};

	//费项类型根据tab默认选择
	const initChargeTypeCode = () => {
		searchObj.value.chargetypeParentIdList = [];
		searchObj.value.chargetypeIdList = [];
		chargetypeList.value.map(item => {
			//租金 选中租金+物业费
			if (curTab.value == 1 && item.filterType == 0) {
				searchObj.value.chargetypeParentIdList = searchObj.value.chargetypeParentIdList.concat(item.feeItemId);
				searchObj.value.chargetypeIdList = searchObj.value.chargetypeIdList.concat(item.feeItemNewestRespList.map(charge => charge.feeItemId));
			}
			//保证金
			if (curTab.value == 2 && item.filterType == 1) {
				searchObj.value.chargetypeParentIdList = [item.feeItemId];
				searchObj.value.chargetypeIdList = item.feeItemNewestRespList.map(charge => charge.feeItemId);
			}
		});
		search();
	};

	//切换费项
	const changeCharge = data => {
		let chargetypeParentIdList = [...new Set(data.map(one => one[0]))];
		let chargetypeIdList = [...new Set(data.map(one => one[1]))];
		searchObj.value.chargetypeParentIdList = chargetypeParentIdList;
		searchObj.value.chargetypeIdList = chargetypeIdList;
	};

	//查询整体列表
	const search = () => {
		emit('onSearch', searchObj.value);
	};

	//导出
	const handleDownload = async () => {
		const fileName = `欠款追缴合同报表.xls`;
		let fileData = await detailApi.debtConractExportApi(searchObj.value);
		downloadNewFile(fileData.data, fileName);
	};

	// 点击切换tab
	const changeTab = value => {
		curTab.value = value;
		initChargeTypeCode();
	};

	const init = () => {
		getChargeList();
		getMergeList();
		getPorjectList();
		getBrandList();
		getBizModeList();
		getContractCodeList();
		getDropDownList();
	};
	init();
</script>
